<template>
  <div class="mind-map-container">
    <!-- 加载状态显示 -->
    <div v-if="loading" class="loading-container">
      <a-spin tip="白板加载中..." size="large" />
    </div>
    <iframe class="mind-map-iframe" src="https://baiban.online/" frameborder="0" @load="handleIframeLoaded" :style="{ opacity: loading ? 0 : 1 }"></iframe>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import './index.css' // 引入独立的CSS文件

// 控制加载状态的响应式变量
const loading = ref(true)

// iframe加载完成的处理函数
const handleIframeLoaded = () => {
  // 设置短暂延迟，确保iframe内容完全渲染
  setTimeout(() => {
    loading.value = false
  }, 300)
}
</script>

<style scoped>
.mind-map-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.mind-map-iframe {
  width: 100%;
  display: block;
  height: 100%;
  transition: opacity 0.3s ease;
}

.loading-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  z-index: 1;
}
</style>
